<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul {
            margin: 0;
        }

        ul {
            padding: 0;
            list-style: none;
        }

        .clearfix::after {
            display: block;
            content: "";
            clear: both;
        }

        .top {
            height: 50px;
            background-color: skyblue;
        }

        .container {
            width: 1000px;
            margin: 10px auto;
        }

        /*header部分样式*/
        .container .header .logo {
            width: 100px;
            height: 120px;
            background-color: pink;
            float: left;
        }

        .container .header .nav {
            width: 700px;
            float: right;
        }

        .nav .nav-top {
            width: 500px;
            height: 50px;
            background-color: turquoise;
            float: right;
        }

        .nav .nav-bottom {
            height: 60px;
            width: 100%;
            background-color: tomato;
            float: right;
            margin-top: 10px;
        }

        /*main-top部分样式*/
        .main {
            margin-top: 20px;
        }

        .main-top .main-top-menu {
            width: 200px;
            height: 500px;
            background-color: lavender;
            float: left;
        }

        .main-top .main-top-content {
            width: 520px;
            height: 500px;

            float: left;
            margin-left: 15px;
        }

        .main-top .main-top-recommend {
            width: 250px;
            height: 500px;
            background-color: orange;
            float: right;
        }

        .main-top-content .top-content-banner {
            height: 300px;
            background-color: tomato;
        }

        .main-top-content .top-content-hot {
            height: 180px;
            margin-top: 20px;
        }

        .top-content-hot ul li {
            width: 120px;
            height: 180px;
            background-color: aquamarine;
            margin: 0px 5px;
            float: left;
        }

        .footer {
            height: 100px;
            background-color: #ddd;
        }
    </style>

<body>
    <div class="top"></div>
    <div class="container">
        <!--header start-->
        <div class="header clearfix">
            <div class="logo"></div>
            <div class="nav clearfix">
                <div class="nav-top"></div>
                <div class="nav-bottom"></div>
            </div>
        </div>
        <!--header end-->
        <!--main start-->
        <div class="main">
            <div class="main-top clearfix">
                <div class="main-top-menu"></div>
                <div class="main-top-content">
                    <div class="top-content-banner"></div>
                    <div class="top-content-hot">
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                        </ul>
                    </div>
                </div>
                <div class="main-top-recommend"></div>
            </div>
        </div>
        <!--main start-->
    </div>
    <div class="footer"></div>
</body>

</html>
